<template>
  <div class="newpage">
    <div class="newpage_title">
      <div class="nav-left">
        <img class="company-logo" src="../../../styles/logo.svg" alt="" />
      </div>
      <div class="nav-center">安全管理</div>
      <div class="nav-right">
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="right_icon"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>
    <div class="newpage_work">
      <tab
        class="newpage_tab"
        style="z-index:0"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="80%"
      >
        <tab-item @on-item-click="handler(1)" :selected="statusIndex == 1">
          安全检查
        </tab-item>
        <tab-item @on-item-click="handler(2)" :selected="statusIndex == 2">
          <span class="badge-area">
            我的计划
            <div v-if="checkSecurityRecordMyListTotal" class="iu-badge">
              {{
                checkSecurityRecordMyListTotal > 99
                  ? "99+"
                  : checkSecurityRecordMyListTotal
              }}
            </div>
          </span>
        </tab-item>
      </tab>
      <div class="list-area" v-if="statusIndex === 1">
        <div class="list-card">
          <div class="card-title" @click="eventCheckList(1)">
            全部计划 {{ checkSecurityRecordListTotal || "" }}
            <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
          </div>
          <template v-if="checkSecurityRecordList.length">
            <checklist
              class="conent-list"
              v-for="item in checkSecurityRecordList.slice(0, 2)"
              :key="item.id"
              :check-item="item"
              :item-child="false"
              :title-check="false"
              @eventCheckList="eventCheckResultList"
            ></checklist>
          </template>
          <template v-else>
            <div class="not-content">
              <img src="/static/img/zwlr-icon.png" />
              <div class="title">暂无计划</div>
            </div>
          </template>
        </div>
      </div>
      <div class="list-area" v-else-if="statusIndex === 2">
        <div class="list-card">
          <div class="card-title" @click="eventCheckList(2)">
            我的计划 {{ checkSecurityRecordMyListTotal || "" }}
            <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
          </div>
          <template v-if="checkSecurityRecordMyList.length">
            <checklist
              class="conent-list"
              v-for="item in checkSecurityRecordMyList.slice(0, 2)"
              :key="item.id"
              :check-item="item"
              :item-child="false"
              :title-check="false"
              @eventCheckList="eventCheckResultList"
            ></checklist>
          </template>
          <template v-else>
            <div class="not-content">
              <img src="/static/img/zwlr-icon.png" />
              <div class="title">暂无计划</div>
            </div>
          </template>
        </div>
      </div>
      <tab
        class="newpage_tab"
        style="z-index:0"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="80%"
      >
        <tab-item
          @on-item-click="eventRisksTabChange(1)"
          :selected="risksIndex == 1"
        >
          <span>
            安全隐患
          </span>
        </tab-item>
        <tab-item
          @on-item-click="eventRisksTabChange(2)"
          :selected="risksIndex == 2"
        >
          <span class="badge-area">
            我的隐患
            <div v-if="troubleMyBadge" class="iu-badge">
              {{ troubleMyBadge > 99 ? "99+" : troubleMyBadge }}
            </div>
          </span>
        </tab-item>
      </tab>
      <div class="list-area" v-if="risksIndex === 1">
        <div class="list-card">
          <div class="card-title" @click="eventRisksList(1, 1)">
            全部隐患 {{ troubleTotal || "" }}
            <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
          </div>
          <div class="tab-list">
            <div
              class="tab-item"
              @click="eventRisksList(item.key)"
              v-for="item in tabNav"
              :key="item.key"
            >
              <span>
                {{ item.num }}
              </span>
              <span>
                {{ item.value }}
              </span>
            </div>
          </div>
          <template v-if="troubleList.length">
            <riskslist
              class="conent-list"
              :risks-item="item"
              v-for="item in troubleList"
              :key="item.id"
              @eventRisksList="eventRisksDetail"
            ></riskslist>
          </template>
          <template v-else>
            <div class="not-content">
              <img src="/static/img/zwlr-icon.png" />
              <div class="title">暂无隐患</div>
            </div>
          </template>
        </div>
      </div>
      <div class="list-area" v-if="risksIndex === 2">
        <div class="list-card">
          <div class="card-title" @click.stop="eventRisksList(1, 2)">
            我的隐患 {{ troubleMyTotal || "" }}
            <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
          </div>
          <div class="tab-list">
            <div
              class="tab-item"
              v-for="item in tabMyNav"
              :key="item.key"
              @click="eventRisksList(item.key, 2)"
            >
              <span>
                {{ item.num }}
              </span>
              <span>
                {{ item.value }}
              </span>
            </div>
          </div>
          <template v-if="troubleMyList.length">
            <riskslist
              class="conent-list"
              :risks-item="item"
              v-for="item in troubleMyList"
              :key="item.id"
              @eventRisksList="eventRisksDetail"
            ></riskslist>
          </template>
          <template v-else>
            <div class="not-content">
              <img src="/static/img/zwlr-icon.png" />
              <div class="title">暂无隐患</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem } from "vux";
import SafetyManageDao from "@/daos/safety_manage_dao";
import checklist from "@/components/common/safetymanage/checklist";
import riskslist from "@/components/common/safetymanage/riskslist";
export default {
  name: "safetyRisks",
  components: {
    Tab,
    TabItem,
    checklist,
    riskslist
  },
  data() {
    return {
      statusIndex: 1,
      risksIndex: 1,
      showMore: false,
      checkSecurityRecordList: [],
      checkSecurityRecordMyList: [],
      checkSecurityRecordListTotal: 0,
      checkSecurityRecordMyListTotal: 0,
      troubleList: [],
      troubleMyList: [],
      certificateAuth: false,
      position: "middle",
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tabNav: [
        {
          key: 1,
          value: "待整改",
          num: 0
        },
        {
          key: 3,
          value: "待验收",
          num: 0
        },
        {
          key: 5,
          value: "已逾期",
          num: 0
        },
        {
          key: 7,
          value: "已完成",
          num: 0
        }
      ],
      tabMyNav: [
        {
          key: 1,
          value: "待整改",
          num: 0
        },
        {
          key: 3,
          value: "待验收",
          num: 0
        },
        {
          key: 5,
          value: "已逾期",
          num: 0
        },
        {
          key: 7,
          value: "已完成",
          num: 0
        }
      ],
      store: {
        id: 0
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  activated() {
    this.init();
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    troubleTotal() {
      return this.tabNav.reduce((a, b) => a + b.num, 0);
    },
    troubleMyTotal() {
      return this.tabMyNav.reduce((a, b) => a + b.num, 0);
    },
    troubleMyBadge() {
      return this.tabMyNav.slice(0, 2).reduce((a, b) => a + b.num, 0);
    }
  },
  methods: {
    init() {
      if (!this.user) {
        this.getUserInfo();
      } else {
        this.getCheckSecurityRecordList();
        this.getMyCheckSecurityRecordList();
        this.getCheckTroubleList(1);
        this.getCheckTroubleList(3);
        this.getCheckTroubleList(5);
        this.getCheckTroubleList(7);
        this.getMyCheckTroubleList(1);
        this.getMyCheckTroubleList(3);
        this.getMyCheckTroubleList(5);
        this.getMyCheckTroubleList(7);
      }
    },
    getUserInfo() {
      this.$http(this.$API.getUserInfo, {}).then(res => {
        this.$store.commit("saveUser", res);
        this.init();
      });
    },
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;

      this.statusIndex = e;
    },
    eventRisksTabChange(e) {
      this.pageNum = 1;
      this.pageSize = 10;

      this.risksIndex = e;
    },
    getCertificateMore() {
      this.pageNum++;
      this.getCertificateList();
    },
    getCheckSecurityRecordList() {
      let params = {
        orgId: this.user.org.id,
        pageSize: 2,
        pageNum: this.pageNum,
        status: 11
      };
      SafetyManageDao.getCheckSecurityRecordList(params, res => {
        this.checkSecurityRecordList.splice(0);
        if (res) {
          this.checkSecurityRecordList.push(...res.content);
          this.checkSecurityRecordListTotal = res.totalElements;
        }
      });
    },
    getMyCheckSecurityRecordList() {
      let params = {
        orgId: this.user.org.id,
        pageSize: 2,
        pageNum: this.pageNum,
        status: 11
      };
      SafetyManageDao.getMyCheckSecurityRecordList(params, res => {
        this.checkSecurityRecordMyList.splice(0);
        if (res) {
          this.checkSecurityRecordMyList.push(...res.content);
          this.checkSecurityRecordMyListTotal = res.totalElements;
        }
      });
    },
    getCheckTroubleList(status) {
      let params = {
        orgId: this.user.org.id,
        pageSize: 2,
        pageNum: this.pageNum,
        status
      };
      SafetyManageDao.getCheckTroubleList(params, res => {
        if (status === 1) {
          this.troubleList.splice(0);
          if (res) {
            this.troubleList = res.content || [];
          }
        }
        this.tabNav.forEach(element => {
          if (element.key === status) {
            element.num = res.totalElements || 0;
          }
        });
      });
    },
    getMyCheckTroubleList(status) {
      let params = {
        orgId: this.user.org.id,
        pageSize: 2,
        pageNum: this.pageNum,
        status
      };
      SafetyManageDao.getMyCheckTroubleList(params, res => {
        if (status === 1) {
          this.troubleMyList.splice(0);
          if (res) {
            this.troubleMyList = res.content || [];
          }
        }
        this.tabMyNav.forEach(element => {
          if (element.key === status) {
            element.num = res.totalElements || 0;
          }
        });
      });
    },
    eventCheckList(tag) {
      this.$router.push({
        name: "safetyCheckList",
        query: {
          tag
        }
      });
    },
    eventCheckResultList({ id, status }) {
      this.$router.push({
        name: "safetyCheckResultList",
        query: {
          id,
          status
        }
      });
    },
    eventRisksList(status = 1, tag = 1) {
      this.$router.push({
        name: "safetyRisks",
        query: {
          status,
          tag
        }
      });
    },
    eventRisksDetail({ id }) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id
        }
      });
    }
  }
};
</script>
<style lang="less">
.newpage_tab {
  .vux-tab {
    height: 45px !important;
    background: #1b1c32;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
  .badge-area {
    position: relative;
  }
  .iu-badge {
    position: absolute;
    top: -8px;
    right: -14px;
  }
  .iu-badge {
    background-color: #f74c31;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    height: 12px;
    line-height: 12px;
    padding: 0px 4px;
    text-align: center;
    white-space: nowrap;
  }
}
</style>
<style lang="less" scoped>
.report_time {
  font-size: 12px;
  color: #ffffff59;
}
.newpage {
  height: 100vh;
  background: #18182c;
  overflow-y: scroll;
}
.none_conent {
  text-align: center;
  color: gray;
  /* height:30px;
    line-height:30px; */
  border-bottom: none !important;
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.newpage_work_second {
  color: #456de6;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.newpage_work_ul {
  display: flex;
  justify-content: space-between;
}
.newpage_work_span {
  font-size: 12px;
  color: #456de6;
}
// .early-type{

// }
.urgent-priority,
.early-type-err {
  color: red;
}
.vital-priority,
.early-type-warning {
  color: #d98806;
}

.newpage_work_li {
  font-size: 12px;
  flex: 1;
  span {
    display: inline-block;
    &:nth-child(1) {
      height: 18px;
      text-align: center;
      line-height: 18px;
      // background:#456de6;
      margin-right: 9px;
    }
    &:nth-child(2) {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }
}

.list-area {
  padding: 16px;
  .list-card {
    background-color: #22233f;
    padding: 8px;
    .card-title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #fff;
      font-size: 14px;
      padding: 0 0 8px;
    }
    .tab-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      .tab-item {
        flex: none;
        width: 22%;
        display: flex;
        flex-direction: column;
        text-align: center;
        line-height: 1;
        padding: 3px 0 8px;
        background-color: #292a4d;
        color: #fff;

        span {
          margin-top: 5px;
          &:nth-child(1) {
            font-size: 16px;
          }
        }
      }
    }
    .conent-list {
      margin-bottom: 16px;
    }
  }
}
.newpage_work_conent {
  color: #fff;
  background: #1b1c32;
  padding: 8px;
  .card {
    margin-bottom: 12px;
    text-align: left;
    padding: 0;
    .bg {
      background: #292a4d;
      border-radius: 4px;
      transition: 0.3s all ease-in-out;
      &.active1 {
        background: #383a69;
      }
      .header {
        color: #fff;
        font-size: 17px;
        padding: 0 8px;
        line-height: 38px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        .more {
          display: inline-block;
          color: #456de6;
        }
        span {
          line-height: 40px;
          font-size: 15px;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 8px;
          &.and {
            color: red;
            padding-top: 2.5px;
          }
          &.gz {
            color: #ff2c2c;
          }
          &.wjk {
            color: rgba(255, 255, 255, 0.6);
          }
          &.tz {
            color: #4fdbe5;
          }
          &.lx {
            color: #dd9710;
          }
          &.yz {
            color: #456de6;
          }
        }
      }
      .title {
        line-height: 40px;
        &.and {
          padding-top: 3px;
        }
      }
      .numberRow {
        line-height: 38px;
        font-size: 16px;
        padding: 0 8px;
        color: rgba(255, 255, 255, 0.6);
        &.and {
          padding-top: 2.5px;
          padding-bottom: 0.5px;
        }
      }
    }
  }
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
